<template>
    <div>
      <h2>添加员工</h2>
      员工姓名: <input type="text" v-model="username">
      员工密码: <input type="password" v-model="password">
      部门: <select v-model="cate_id">
        <option v-for="i in cates" :value="i.id">{{i.name}}</option>
    </select>
      <button @click="sub">添加</button>
    </div>
</template>

<script>
    export default {
        name: "AddStaff",
        data(){
          return{
            username:'',
            password:'',
            cate_id:1,
            cates:[],
          }
      },
      mounted() {
          this.axios({
            url:'http://127.0.0.1:8000/app01/department/',
            method:'get',
          }).then(res=>{
            this.cates=res.data.data
          })
      },
      methods:{
          sub(){
            // 1 模拟form表单
            let formdata=new FormData();
            // 2 将数据添加到表单中
            formdata.append('username',this.username);
            formdata.append('password',this.password);
            formdata.append('cate_id',this.cate_id);
            // 3 向后端发送数据
            this.axios({
              url:'http://127.0.0.1:8000/app01/staff/',
              method:'post',
              data:formdata,
            }).then(res=>{
              alert(res.data.msg)
            })
          }
      }
    }
</script>

<style scoped>

</style>
